<template>
  <div class="screen">
    <div class="screen-one">
      <div class="screen-one-text">
        <div class="screen-one-projuct-text">
          项目
        </div>
        <div class="screen-one-all-text" :class="{'active':active==='全部'}" @click="onefilterAll">
          全部
        </div>
      </div>
      <div class="screen-one-wrap" :style="{'height': autoHeight}">
        <div v-for="item in oneData" :key="item.class_id" class="screen-one-item" :class="{'active':active===item.class_name}" @click="onefilter(item)">
          {{ item.class_name }}
        </div>
        <div v-if="oneData.length" class="screen-one-item more" @click="showMore">
          <span>{{ moretext }}</span>
          <img src="@/assets/img/right-icon.png" alt="" class="arrow" :style="`transform: rotate(${deg}deg);`">
        </div>
      </div>
    </div>
    <div v-if="twoisfalse" class="screen-two">
      <div class="screen-two-text">
        <div class="screen-two-projuct-text">
          二级
        </div>

        <div class="screen-two-all-text" :class="{'active':active2==='全部'}" @click="twofilterAll">
          全部
        </div>
      </div>
      <div class="screen-two-wrap">
        <div v-for="item in twoData" :key="item.class_id" class="screen-two-item" :class="{'active2':active2===item.class_name}" @click="twofilter(item)">
          {{ item.class_name }}
        </div>
      </div>
    </div>
    <div v-if="threeisfalse" class="screen-three">
      <div class="screen-three-text">
        <div class="screen-three-projuct-text">
          三级
        </div>

        <div class="screen-three-all-text" :class="{'active':active3==='全部'}" @click="threefilterAll">
          全部
        </div>
      </div>
      <div class="screen-three-wrap">
        <div v-for="item in threeData" :key="item.class_id" class="screen-three-item" :class="{'active3':active3===item.project_name}" @click="threefilter(item)">
          {{ item.project_name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getScreenTwo, getScreenOne } from '@/api/screen.js'
export default {
  props: {
    highlight: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      active: '全部',
      active2: '全部',
      active3: '全部',
      oneData: [],
      twoData: [],
      threeData: [],
      twoisfalse: false,
      threeisfalse: false,
      oneid: '',
      onename: '',
      twoid: '',
      twoname: '',
      autoHeight: '35px',
      moretext: '更多',
      deg: 90
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    init() {
      getScreenOne(1).then((res) => {
        this.oneData = res.data
      })
      if (this.highlight && this.highlight.name) {
        switch (this.highlight.name.length) {
          case 1:
            this.active = this.highlight.name[0]
            this.twoisfalse = true
            this.oneid = this.highlight.id[0]
            this.onename = this.highlight.name[0]
            if (this.threeisfalse) {
              this.threeisfalse = false
            }
            getScreenTwo(this.highlight.id[0]).then(res => {
              this.twoData = res.data
            })
            break
          case 2:
            this.active = this.highlight.name[0]
            this.twoisfalse = true
            this.oneid = this.highlight.id[0]
            this.onename = this.highlight.name[0]
            this.active2 = this.highlight.name[1]
            this.twoisfalse = true
            this.threeisfalse = true
            this.twoid = this.highlight.id[1]
            this.twoname = this.highlight.name[1]
            this.$emit('classId', { id: this.highlight.id, name: this.highlight.name })
            getScreenTwo(this.highlight.id[0]).then(res => {
              this.twoData = res.data
            })
            getScreenTwo(this.highlight.id[1]).then(res => {
              this.threeData = res.data
            })
            break
          case 3:
            this.active = this.highlight.name[0]
            this.twoisfalse = true
            this.oneid = this.highlight.id[0]
            this.onename = this.highlight.name[0]
            this.active2 = this.highlight.name[1]
            this.twoisfalse = true
            this.threeisfalse = true
            this.twoid = this.highlight.id[1]
            this.twoname = this.highlight.name[1]
            this.$emit('classId', { id: this.highlight.id, name: this.highlight.name })
            getScreenTwo(this.highlight.id[0]).then(res => {
              this.twoData = res.data
            })
            getScreenTwo(this.highlight.id[1]).then(res => {
              this.threeData = res.data
            })
            this.active3 = this.highlight.name[2]
            break
        }
      }
    },
    onefilter(i) {
      this.active = i.class_name
      this.twoisfalse = true
      this.oneid = i.class_id
      this.onename = i.class_name
      this.$emit('classId', { id: [this.oneid], name: [this.onename] })
      if (this.threeisfalse) {
        this.threeisfalse = false
      }
      getScreenTwo(i.class_id).then(res => {
        this.twoData = res.data
      })
    },
    twofilter(i) {
      this.active2 = i.class_name
      this.threeisfalse = true
      this.twoid = i.class_id
      this.twoname = i.class_name
      this.$emit('classId', { id: [this.oneid, this.twoid], name: [this.onename, this.twoname] })
      getScreenTwo(i.class_id).then(res => {
        this.threeData = res.data
      })
    },
    threefilter(i) {
      this.$emit('classId', { id: [this.oneid, this.twoid, i.project_id], name: [this.onename, this.twoname, i.project_name] })
      this.active3 = i.project_name
    },
    onefilterAll() {
      this.active = '全部'
      this.twoisfalse = false
      this.threeisfalse = false
      this.$emit('classId', { id: [], name: [] })
    },
    twofilterAll() {
      this.active2 = '全部'
      this.threeisfalse = false
      this.$emit('classId', { id: [this.oneid], name: [this.onename] })
    },
    threefilterAll() {
      this.active3 = '全部'
      this.$emit('classId', { id: [this.twoid], name: [this.twoname] })
    },
    showMore() {
      if (!this.isShowMore) {
        this.autoHeight = 'auto'
        this.moretext = '收起'
        this.deg = -90
      } else {
        this.autoHeight = '35px'
        this.moretext = '更多'
        this.deg = 90
      }
      this.isShowMore = !this.isShowMore
    }
  }
}
</script>
<style scoped lang="scss">
.screen {
  width: 1190px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .screen-one {
    width: 100%;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    display: flex;
    padding-bottom: 15px;
    .screen-one-text {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
      margin-left: 30px;
      display: flex;
      margin-top: 15px;
      .screen-one-all-text {
        margin-left: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
      }
      .screen-one-all-text:hover {
        cursor: pointer;
      }
    }

    .screen-one-wrap {
      width: 1074px;
      display: flex;
      flex-wrap: wrap;
      padding-right: 110px;
      position: relative;
      overflow: hidden;
      .more {
        position: absolute;
        right: 0;
        margin-right: 80px;
        display: flex;
        align-items: center;
        span {
          margin-right: 5px;
        }
        .arrow {
          display: block;
          width: 6px;
          margin-right: -8px;
        }
      }
    }
    .screen-one-item {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-left: 30px;
      margin-top: 15px;
    }
    .screen-one-item:hover {
      cursor: pointer;
    }
  }
}

.screen-two {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
  display: flex;
  padding-bottom: 15px;
  position: relative;
  .screen-two-text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    display: flex;
    .screen-two-projuct-text {
      width: 88px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    .screen-two-all-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      left: 88px;
      top: 15px;
    }
    .screen-two-all-text:hover {
      cursor: pointer;
    }
  }
  .screen-two-wrap {
    width: 1074px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 27px;
  }
  .screen-two-item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 15px;
    margin-left: 30px;
  }
  .screen-two-item:hover {
    cursor: pointer;
  }
}

.screen-three {
  width: 100%;
  display: flex;
  padding-bottom: 15px;
  position: relative;
  .screen-three-text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    display: flex;
    .screen-three-projuct-text {
      width: 88px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    .screen-three-all-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      left: 88px;
      top: 15px;
    }
    .screen-three-all-text:hover {
      cursor: pointer;
    }
  }
  .screen-three-wrap {
    width: 1074px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 27px;
  }
  .screen-three-item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 15px;
    margin-left: 30px;
  }
  .screen-three-item:hover {
    cursor: pointer;
  }
}
.active {
  color: rgba(80, 76, 255, 1) !important;
}
.active2 {
  color: rgba(80, 76, 255, 1) !important;
}
.active3 {
  color: rgba(80, 76, 255, 1) !important;
}
</style>
